<template>
  <div class="content">
    <alertTip v-if="showAlert" @closeTip="go()" :alertText="alertText"></alertTip>

    <!--<div class="header">-->
      <!--<headers title="新建店铺"></headers>-->
    <!--</div>-->
    <!--<div class="procedure">-->
    <!--<div class="tupian">-->
    <!--<img src="../assets/images/shop/ico_dpxx_2@1x.png" alt="">-->
    <!--<img src="../assets/images/shop/line@1x.png" alt="">-->
    <!--<img src="../assets/images/shop/ico_flxx_1@1x.png" alt="">-->
    <!--<img src="../assets/images/shop/line@1x.png" alt="">-->
    <!--<img src="../assets/images/shop/ico_wc_1@1x.png" alt="">-->
    <!--</div>-->

    <!--<div class="state">-->
    <!--<div class="shop">设置店铺信息</div>-->
    <!--<div class="fl">设置分类信息</div>-->
    <!--<div class="finsh">完成</div>-->
    <!--</div>-->

    <!--</div>-->
    <div class="message">
      <mt-field class="shopname" label="店铺名称" placeholder="请输入您的店铺名称" v-model="shopName"></mt-field>
      <mt-field label="真实姓名" placeholder="请输入您的真实姓名" v-model="realName"></mt-field>
      <mt-field label="手机号" placeholder="请输入手机号" type="tel" v-model="mobile"></mt-field>
      <p class="miaoshu">店铺描述</p><textarea cols="5" maxlength="50" class="addr_detail" placeholder="请填写店铺描述,最多不超过50字" v-model="description"></textarea>
    </div>
    <div class="next" @click="nextSet">
      下一步
    </div>
  </div>

</template>

<script>
  import wx from 'weixin-js-sdk'
  import { wxHttpTool,wx_config, http_getParam, get_shopQrcoe,wx_share,wx_hideAllMenu } from '../components/httpUtil/httpUtil'
  import {msg_10046} from '../message/msg_10046'
  import {relogin} from "../components/httpUtil/httpUtil";

  export default {
    name: 'NewShop',
    data () {
      return {
        shopName: '',
        realName: '',
        mobile: '',
        shopId: '',
        showAlert:false,
        alertText:null,
        description: ''
      }
    },
    created () {
      wxHttpTool.wxAuthor(this, function (varRet, varJson, varThis = this) {
        if (varRet == -1) {
          varThis.alertTip('网络错误');
          varThis.go = function () {
            varThis.showAlert = false;
          }

        }
        // 关注钱应该判断下是否已经关注过了
        msg_10046.send(varThis,msg_10046.entity(),function(varThis,res){
          varThis.wxlist=res.data.p.sign
          wx_config(varThis.wxlist);
          wx_hideAllMenu();
          wx.hideMenuItems({
            //禁用单独分享朋友圈QQ空间等功能
            menuList: ["menuItem:share:timeline","menuItem:share:QZone","menuItem:share:qq"] // 要隐藏的菜单项，所有menu项见附录3
          });
        })


      },this.type)
    },
    methods: {
      Pro(fun) {
        return new Promise((res, rej) => {
          fun()
        })
      },
      alertTip(msg){
        this.showAlert = true;
        this.alertText = msg;
      },
      go(){
        this.showAlert = false
      },
      // 初次登录，新建店铺
      nextSet () {
        let reg = /^1[34578]\d{9}$/
        if (!reg.test(this.mobile)) {
          this.alertTip("手机格式不正确");
          this.go = function(){
             this.showAlert = false;
          }
          // alert('手机格式不正确')
          this.phone = ''
        } else if(this.shopName===""){
          this.alertTip('店铺名称不能为空');
          this.go = function(){
             this.showAlert = false;
          }
        } else if(this.realName==="") {
          this.alertTip('真实姓名不能为空');
          this.go = function(){
             this.showAlert = false;
          }
        } else if( this.description===""){
          this.alertTip('店铺描述不能为空');
          this.go = function(){
             this.showAlert = false;
          }
        }else {
          let jsonValue = JSON.stringify(
            {
              'c': '10017',
              'p': {
                'userId': JSON.parse(window.localStorage.data).id,
                'tokenId': token(),
                'shopName': this.shopName,
                'realName': this.realName,
                'mobile': this.mobile,
                'description': this.description
              }
            }
          )
          this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
            console.log(res)
            if (res.data.p.isTrue) {
              this.shopId = res.data.p.shop.id
              console.log(res.data.p.shop.id )
              window.localStorage.setItem('shopId', this.shopId)
              // 清除数据重新登录
              window.localStorage.removeItem('data');
              this.$router.push({name: 'disTrueHome'})
            } else {
                this.alertTip(res.data.p.errorMsg)
              this.go = ()=> {
                this.showAlert = false
                if(res.data.p.errorMsg=='不能创建多个店铺'){
                  this.$router.push({name: 'Shops'})
                }
              }
              // if(res.data.p.errorMsg=='不能创建多个店铺'){
              //   this.$router.push({name: 'Shops'})
              // }


              // this.$router.push({name: 'Shops'})
              if (res.data.p.errorCode === 90) {
                this.go = ()=> {
                  this.showAlert = false
                  let _this = this;
                  relogin(_this)
                }
              }
            }
          })
        }
      },
      // 修改店铺信息
      /* Set () {
       let reg = /^1[34578]\d{9}$/
       if (!reg.test(this.mobile)) {
       alert('手机格式不正确')
       this.phone = ''
       } else {
       let jsonValue = JSON.stringify(
       {
       'c': '10017',
       'p': {
       'tokenId': token(),
       'userId': 1009,
       'shopName': shopsInfo.shopName,
       'realName': shopsInfo.realName,
       'mobile': shopsInfo.mobile
       }
       }
       )
       this.$http.post(api + '/qqs.us', jsonValue).then((res) => {
       if (res.data.p.isTrue) {
       console.log(res)
       this.shopId = res.data.p.shopId
       localStorage.setItem('shopId', this.shopId)
       this.$router.push({name: 'Shops'})
       }
       })
       }
       },*/
    },
    components: {}
  }
</script>

<style lang="scss">
  .content {
    height: 520px;
    /*.procedure {
      padding-top: 80px;
      height: 224px;
      !*padding-top: 127px;*!
      width: 640px;
      margin: 0 auto;
      !*display: flex;*!
      .tupian {
        !*float: left;*!
        width: 100%;
        !*box-sizing: border-box;*!
        padding-top: 47px;
        height: 68px;
        !*vertical-align: middle;*!
        img:first-child {
          width: 64px;
          height: 64px;
          !*margin-top: 47px;*!
          margin-left: 50px;
          margin-right: 18px;
        }
        img:nth-child(2n) {
          width: 134px;
          height: 6px;
          !*margin-top: 5px;*!
          margin-right: 17px;
          padding-bottom: 30px;
        }
        img:nth-child(3) {
          width: 60px;
          height: 60px;
          !*margin-top: 51px;*!
          margin-right: 17px;
        }
        img:nth-child(5) {
          width: 60px;
          height: 60px;
          !*margin-top: 51px;*!
          !*margin-left: 9px;*!
        }
      }
      .state {
        width: 100%;
        height: 26px;
        font-size: 24px;
        color: #3b3b43;
        margin-top: 28px;
        .shop {
          !*width: 152px;*!
          !*float: left;*!
          display: inline-block;
          margin-left: 20px;
        }
        .fl {
          !*width: 152px;*!
          !*float: left;*!
          display: inline-block;
          margin-left: 80px;
        }
        .finsh {
          width: 56px;
          !*float: left;*!
          display: inline-block;
          margin-left: 142px;
        }
      }
    }*/
    .message {
      /*margin-top: 100px;*/
      a {
        text-decoration: none;
      }
      .mint-cell-wrapper {
        background: #ffffff;
        height: 92px;
        line-height: 92px;
        font-size: 28px;
        padding: 0px 30px 0px 34px;
        /*text-align: right;*/
        .mint-cell-title {
          color: #3b3b43;
        }
        .mint-cell-value {
          text-align: right;
          ::-webkit-input-placeholder {
            text-align: right;
          }
          color: #818181;
        }
      }
      .mint-field-core {
        text-align: right;
      }
      .miaoshu{
        color: #3b3b43;
        font-size: 26px;
        margin-left: 31px;
        margin-top: 10px;
      }
      .addr_detail{
        width:100%;
        height: 150px;
        border:none;
        padding: 30px;
        font-size: 25px;
        box-sizing: border-box;
        resize: none;
      }
    }
    .next {
      position: fixed;
      bottom: 0px;
      height: 98px;
      width: 100%;
      text-align: center;
      line-height: 98px;
      font-size: 28px;
      color: #ffffff;
      background: url('../assets/images/shop/btn@shop.png') no-repeat;
      background-size: 100%;
    }
  }

</style>
